<template>
  <view class="cate-box-wrapper"
  :class="['cate-box-wrapper-'+index]"
   >
    <view class="cate-box-bg-img">
      <image class="img" :src="cateBoxStyList[index].bgImg" mode=""></image>
    </view>
    <view class="info-box">
      <view class="box-tit">{{cateItemObj.categoryName}}</view>
      <view class="sub-tit">
        <view>{{cateItemObj.categorySummary}}</view>
      </view>
    </view>
    
    <view class="scl-list-wrapper">
      <view class="scl-list-bg" >
          <swiper
            :indicator-dots="false" :autoplay="false" :interval="3000" 
            :duration="1000" :circular="true" 
            :current="currentIndex"
            previous-margin="50rpx"
            next-margin="50rpx"
            class="swiper-wrapper" 
          >
            <swiper-item 
              class="swiper-item-box-1" 
              v-for="(item,index) in cateItemObj.commonSclPOS"
              :key="index"
              @click="emitClick(item)"
            >
              <image class="img" :src="item.detailImg || item.coverImg" mode="scaleToFill"></image>
              <view class="use-count-num-wrapper" style="left: 4rpx;">
                <view class="tbiip-count" >
                  <image class="tbii-ic-count" :src="teamIcon" mode="">
                  </image>{{item.viewNumStr}}次
                </view>  
              </view>
              
              <view class="btn-box" >
                去测试
              </view>
            </swiper-item>
          </swiper>
        
        <view class="small-scl-wrapper">
          
          <view class="small-scl-box" v-for="(subItem,i) in cateItemObj.flexSclArr" :key="i" @click="emitClick(subItem)">
            <view class="name ellipsis">{{subItem.sclName}}</view>
            <view class="intro ellipsis">{{subItem.summary}}</view>
            <view class="small-bot">
              <view class="right-box">
                <image class="img" :src="subItem.coverImg || subItem.detailImg" mode="widthFix"></image>
                <view class="use-count-num-wrapper">
                  <view class="tbiip-count" >
                    <image class="tbii-ic-count" :src="teamIcon" >
                    </image>{{subItem.viewNumStr}}次
                  </view>  
                </view>
              </view>
              
              <view class="left-box">
                <!-- <view class="price-box">
                  <view class="price">¥{{subItem.discountType ? subItem.discountPrice : subItem.newOriginalPrice }}</view>
                  <view class="coupon-text" v-if="subItem.discountType">券后</view>
                </view> -->
                <view class="btn-box" >
                  去测试
                </view>
              </view>
            </view>
          </view>
          
        </view>
        
      </view>
    </view>
      
    <view class="reload-btn"
      :style="{
        color:cateBoxStyList[index].color
      }"
      @click="randomScl"
    >
      <text>换一换</text>
      <view class="loop-img" >
        <image class="img" :src="cateBoxStyList[index].loopImg" mode="" :class="{'loop-loading':isLoading}"></image>
      </view>
    </view>
  </view>
  
</template>

<script>
  import {calculateDiscountedPrice} from '@/common/utils/util.js'
  
  export default{
    props:{
      cateItem:{
        type:Object,
        default:()=>{}
      },
      index:{
        type:Number,
        default:0
      },
      discountType:{
        type:Number,
        default:0
      },
      discountNum:{
        type:Number,
        default:0
      },
      discountId:{
        type:[Number,String],
        default:0
      },
    },
    data(){
      return {
        teamIcon:this.imgBaseURL + '/team-icon.png',
        cateBoxStyList:[
          {
            // bgImg:this.staticImgs.cateImg1,
            bgImg:this.imgBaseURL + '/scl/home/home-cate-1.png',
            color:'#83B351',
            loopImg:this.imgBaseURL + '/scl/home/loop-1.png',
          },{
            bgImg:this.imgBaseURL + '/scl/home/home-cate-2.png',
            color:'#D590B3',
            loopImg:this.imgBaseURL + '/scl/home/loop-2.png',
          },{
            bgImg:this.imgBaseURL + '/scl/home/home-cate-3.png',
            color:'#9EBAEC',
            loopImg:this.imgBaseURL + '/scl/home/loop-3.png',
          },{
            bgImg:this.imgBaseURL + '/scl/home/home-cate-4.png',
            color:'#7BCB93',
            loopImg:this.imgBaseURL + '/scl/home/loop-4.png',
          },
        ],
        isLoading:false,
        cateItemObj:{},
        reRender:false,
        currentIndex:0,
        lastRandomNumber: 0
      }
    },
    watch:{
      cateItem:{
        handler(val){
          this.cateItemObj = val;
        },
        immediate:true
      }
    },
    methods:{
      emitClick(item){
        // @emitClick="()=>checkNotCompleteScl(item.id,()=>itemClick(item,14))"
        this.$emit('clickC',item);
      },
      getRandomNumber(min, max) {
          let randomNumber;
          do {
              randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
          } while (randomNumber === this.lastRandomNumber);
          this.lastRandomNumber = randomNumber;
          return randomNumber;
      },
      randomScl(){
        if(this.isLoading){
          return;
        }
        
        this.isLoading = true;
        this.$u.api.getCateSclRandom({
          categoryId:this.cateItem.id
        }).then(({data:res})=>{
          console.log(res,'===========res')
          
          let item = res.data;
          
          item.flexSclArr = []
          if(item.leftScl){
            item.flexSclArr.push(item.leftScl)
          }
          if(item.rightScl){
            item.flexSclArr.push(item.rightScl)
          }
          
          
          item.flexSclArr.map(subItem=>{
            //大于1万则显示1w，例子：1.2w
            if(subItem.collectNums > 10000){
              subItem.viewNumStr = `${(subItem.collectNums / 10000).toFixed(1)}w`
            } else {
              subItem.viewNumStr = subItem.collectNums
            }
                      
            return subItem
          })
          
          this.cateItemObj.flexSclArr = item.flexSclArr;
          if(this.cateItemObj.commonSclPOS.length > 1){
            let randomNum = this.getRandomNumber(0,this.cateItemObj.commonSclPOS.length-1)
            this.currentIndex = randomNum;  
          }
          
          
        }).finally(()=>{
          setTimeout(()=>{
            this.isLoading = false;
          },200)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    // height: 1em;
  }  
  
  .loop-img{
    display: inline-block;
    width: 26rpx;
    height: 26rpx;
    margin-left: 8rpx;
    margin-bottom: 6rpx;
    .img{
      width: 100%;
      height: 100%;
    }
  }
  
  .loop-loading{
    	animation-iteration-count: infinite;
    	animation-name: loading;
    	animation-duration: 1000ms;
    	animation-delay: 0;
    	animation-timing-function: ease-in-out;
  }
  @keyframes loading {
  	0% {
  		transform: rotate(0deg);
  	}
  	100% {
  		transform: rotate(360deg);
  	}
  }
  
  .cate-box-wrapper{
    margin: auto;
    
    box-sizing: border-box;
    padding: 20rpx;
    
    width: 720rpx;
    position: relative;
    padding-top: 168rpx;
    margin-top: 44rpx;
    
    .cate-box-bg-img{
      width: 176rpx;
      height: 176rpx;
      position: absolute;
      right: 26rpx;
      top: -26rpx;
      
      .img{
        width: 100%;
        height: 100%;
        box-shadow: none;
      }
    }
    
    .info-box{
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      top: 0;
      
      box-sizing: border-box;
      height: 168rpx;
      padding-top: 20rpx;
      padding-left: 20rpx;
    }
  
    .box-tit{
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 40rpx;
      color: #333333;
      line-height: 56rpx;
      text-align: left;
      font-style: normal;
      margin-bottom: 8rpx;
    }
    .sub-tit{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #8D8E8D;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      margin-bottom: 18rpx;
      
      width: 540rpx;
    }
    
    .reload-btn{
      margin-top: 20rpx;
      // background-color: red;
      text-align: center;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 28rpx;
      color: #83B351;
      // line-height: 42rpx;
      font-style: normal;
      
      display: flex;
      align-items: center;
      justify-content: center;
      // height: 80rpx;
    }
    
    .scl-list-wrapper{
      width: 680rpx;
      // height: 590rpx;
      background: #FFFFFF;
      border-radius: 28rpx;
      padding-top: 28rpx;
      
      .scl-list-bg{
        width: 100%;
        height: 100%;
        
      }
      
      // box-sizing: border-box;
      
      // .swiper-item-act{
      //   padding: 0 12rpx;
      // }
      
      .swiper-wrapper{
        height: 289rpx !important;
      }
      
      .swiper-item-box-1{
        height: 284rpx !important;
        // width: 620rpx !important;
        // padding-right: 12rpx;
        box-sizing: border-box;
        padding: 0 6rpx;
        position: relative;
        
        background-color: #fff;
        
        .img{
          width: 100%;
          height: 100%;
          box-shadow: none;
        }
        
        .btn-box{
          // margin-top: 18rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #FFFFFF;
          line-height: 50rpx;
          text-align: center;
          font-style: normal;
          
          width: 130rpx;
          height: 50rpx;
          background: linear-gradient( 180deg, #A9EE87 0%, #70D669 100%);
          border-radius: 25rpx;
          
          position: absolute;
          right: 14rpx;
          bottom: 14rpx;
        }
      }
      
      .small-scl-wrapper{
        display: flex;
        justify-content: center;
          .small-scl-box{
            width: 330rpx;
            height: 272rpx;
            border-radius: 28rpx;
            padding: 28rpx 24rpx;
            box-sizing: border-box;
            // background-color: red;
            
            
            .name{
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 27rpx;
              color: #333333;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
            .intro{
              font-family: PingFangSC, PingFang SC;
              font-weight: 300;
              font-size: 24rpx;
              color: #888888;
              line-height: 38rpx;
              text-align: justify;
              font-style: normal;
              
              
            }
            .small-bot{
              height: 130rpx;
              
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 4rpx;
              
              .left-box{
                display: flex;
                flex-direction: column;
                // justify-content: flex-end;
                justify-content: center;
                height: 130rpx;
                
                .price-box{
                  display: flex;
                  align-items: center;
                  
                  .price{
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #FF5536;
                    line-height: 26rpx;
                    text-align: left;
                    font-style: normal;
                  }
                  
                  .coupon-text{                  
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 22rpx;
                    color: #FF5536;
                    line-height: 30rpx;
                    text-align: left;
                    font-style: normal;
                    margin-left: 6rpx;
                    
                  }
                }
               
                .btn-box{
                  // margin-top: 18rpx;
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: bold;
                  font-size: 26rpx;
                  color: #FFFFFF;
                  line-height: 50rpx;
                  text-align: center;
                  font-style: normal;
                  
                  width: 130rpx;
                  height: 50rpx;
                  background: linear-gradient( 180deg, #A9EE87 0%, #70D669 100%);
                  border-radius: 25rpx;
                }
              }
              
              
              .right-box{
                width: 122rpx;
                height: 130rpx;
                border-radius: 8rpx;
                position: relative;
                
                .img{
                  width: 100%;
                  height: 100%;
                  box-shadow: none;
                }
                
                
                
                
              }
            
              
            }
            
          }
          //.small-scl-box - end
      }
      //.small-scl-wrapper - end
      
      
      
      
    }
    
    
  
  }
  
  
  .cate-box-wrapper-0{
    background:#EBFFD6;
    box-shadow: 0rpx 2rpx 16rpx 0rpx #ECECEC;
    margin-top: 0;
  }
  .cate-box-wrapper-1{
    background:#FFF1F8;
    box-shadow: 0rpx 2rpx 16rpx 0rpx #ECECEC;
  }
  .cate-box-wrapper-2{
    background:#F1F6FF;
    box-shadow: 0rpx 2rpx 16rpx 0rpx #ECECEC;
  }
  .cate-box-wrapper-3{
    background:#EAFEF0;
    box-shadow: 0rpx 2rpx 16rpx 0rpx #ECECEC;
  }
  
  
  .use-count-num-wrapper{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #FFFFFF;
    line-height: 45rpx;
    text-align: left;
    font-style: normal;
    position: absolute;
    left: 0;
    top: 0;
    
    min-width: 118rpx;
    height: 44rpx;
    box-sizing: border-box;
    background: rgba(71,71,71,0.71);
    border-radius: 12rpx 0rpx 12rpx 0rpx;
    padding: 0 8rpx;
  }
  
  .tbiip-count {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #FFFFFF;
    line-height: 45rpx;
    text-align: left;
    font-style: normal;
    
    display: flex;
    // justify-content: center;
    align-items: center;
    
    .tbii-ic-count {
      width: 22rpx;
      height: 22rpx;
      margin-right: 2rpx;
    }
    
  }
     
</style>